import React, {forwardRef, useEffect, useRef, useState} from 'react';
import StatusBar from '../status-bar/status-bar';
import TitleHeader from '../title-header';
import WeatherForecast from '../weather-forecast';
import WeatherMetrics, {MetricTab} from '../weather-metrics';
import WaterWellData from '../water-well-data';
import WeatherAlert from '../weather-alert';
import  './index.scss';
import * as echarts from "echarts";


export  interface  WeatherDataCardProps {
  style?: React.CSSProperties;
  width?: string | number;
  height?: string | number;
  backgroundColor?: string;
  backgroundOpacity?: number;
  borderRadius?: number;
}

const WeatherDataCard =forwardRef<HTMLDivElement, WeatherDataCardProps>((props, ref) => {
   const {
    style,
    width = 500,
    height = 1080,
    backgroundColor = '#586570',
    backgroundOpacity = 0.38,
    borderRadius = 4,
     headerTextColor = '#56A5FF',
     recordTextColor = 'rgba(255,255,255,0.9)',
     statValueColor = '#1AD7FF',
     statLabelColor = '#FFFFFF',
     airTabs = [
       { id: '1', text: '2、3小时雨量', isActive: true },
       { id: '2', text: '24小时雨量', isActive: false },
       { id: '3', text: '24小时风速', isActive: false },
       { id: '4', text: '24小时温度', isActive: false }
     ],
     tabs = [
       { id: '1', text: '仓库1', isActive: true },
       { id: '2', text: '仓库2', isActive: false },
       { id: '3', text: '仓库3', isActive: false }
     ],
     activeTabBackground = 'http://localhost:8085/static/images/qixiangfangzhai/bz149bf.png',
     inactiveTabBackground = 'http://localhost:8085/static/images/qixiangfangzhai/jxbf2.png',
     actionIcon = 'http://localhost:8085/static/images/qixiangfangzhai/bz9.png',
     textColors = {
       time: 'rgba(255,255,255,0.6)',
       label: 'rgba(255,255,255,0.8)',
       value: '#1AD7FF',
       weather: '#FFFFFF'
     },
     weatherData = {
       forecastTime: '11日13时预报:',
       currentTime: '当时实况(13:45):',
       weatherType: '大雨',
       weatherIcon: 'http://localhost:8085/static/images/qixiangfangzhai/yu.png',
       temperature: '20.8℃',
       feelsLike: '20.7℃',
       humidity: '98%',
       pressure: '1012hpa',
       windDirection: '东北偏东风',
       windLevel: '1级'
     },
     hourData = [
       { title: '1小时圈', type: '重点城市气象告警', value: '12', icon: 'http://localhost:8085/static/images/qixiangfangzhai/hour-icon.png'},
       { title: '3小时圈', type: '重点城市气象告警', value: '324', icon: 'http://localhost:8085/static/images/qixiangfangzhai/hour-icon.png'}
     ],
     wellData = [
       { icon: 'http://localhost:8085/static/images/qixiangfangzhai/well-icon-one.png', value: '12', type: '正常', unit: '个'},
       { icon: 'http://localhost:8085/static/images/qixiangfangzhai/well-icon-two.png', value: '324', type: '预警', unit: '个'},
       { icon: 'http://localhost:8085/static/images/qixiangfangzhai/well-icon-three.png', value: '324', type: '超标', unit: '个'},
     ],
     stats = [
       { label: '物资类别', value: '20', showGradient: true },
       { label: '物资总数', value: '30', unit: '万件', showGradient: true },
       { label: '近半年到期物资数量', value: '30', unit: '万件', showGradient: true }
     ],
     tableHeaders = {
       name: '物资名称',
       quantity: '数量',
       expiring: '近半年到期数量'
     },
     records = [
       { id: '1', name: '一次性防护口罩', quantity: '4450', expiringQuantity: '200' },
       { id: '2', name: '医用外科', quantity: '600', expiringQuantity: '0' }
     ],
     showGradientText = true,
   } = props;
  const [airTabIndex, setAirTabIndex] = useState(0);
  const [tabIndex, stabIndex] = useState(0);
  const componentStyle: React.CSSProperties = {
       width: typeof width === 'number' ? `${width}px` : width,
       height: typeof height === 'number' ? `${height}px` : height,
       '--background-color': backgroundColor,
       '--background-opacity': backgroundOpacity,
       '--border-radius': `${borderRadius}px`,
       ...style
     } as React.CSSProperties;
  const handleTabClick = (tab: MetricTab, index: number) => {
    setAirTabIndex(index);
  };
  const chartRef = useRef<HTMLDivElement>(null);
  const myChartData = {
    vehicleFlow: [120, 132, 101, 134, 90, 230],
    passengerFlow: [220, 182, 191, 234, 290, 330],
  }
  useEffect(() => {
    if (chartRef.current && myChartData) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        color: '#32C5FF',
        grid: {
          left: '10%',
          right: '4%',
          top: '32%',
          bottom: '20%',
        },
        legend: {
          top: '0', // 顶部位置
          right: '15%', // 右侧位置
          icon: 'roundRect',
          itemHeight: 2,
          itemWidth: 16,
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              fontSize: 14,
              color: 'rgba(255, 255, 255, 0.80)',
            },
          },
          axisLabel: {
            interval: 1

          },
          data: ['昨日早间', '昨日晚间', '昨日夜间', '今日早间', '今日晚间', '今日夜间'],

        },
        yAxis: {
          type: 'value',
          splitNumber: 2,
          name: '(mm)',
          nameTextStyle: {
            align: 'right'
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              fontSize: 14,
              color: 'rgba(255, 255, 255, 0.80)',
            },
          },
          splitLine: {
            showMinLine: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          }
        },
        series: [
          {
            name: '雨量',
            type: 'line',
            data: myChartData.vehicleFlow,
            symbol: 'none',
            smooth: true,
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener('resize', () => chartInstance.resize());
      return () => {
        chartInstance.dispose();
      };
    }
  }, [myChartData]);
  const getGradientStyle = (text: string) => {
    if (!showGradientText) return {};
    return {
      background: 'linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text'
    };
  };
  return (
    <div className="weather-data-card" style={componentStyle}>
      <div className="top-wrap">
        <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>气象数据</div>
              <div className="sen-title">气象数据</div>
            </div>
            <div className="subtitle">Weather data</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">杭州天气</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
          </div>
          <div className="air-area">
            {/* 左侧 */}
            <div className="left-wrap">
              {/* 图标 */}
              <div
                className="forecast-time"
                style={{ color: textColors.time }}
              >
                {weatherData.forecastTime}
              </div>
              {/* 天气类型 */}
              <div className="weather-section">
                <div
                  className="weather-icon"
                  style={{
                    width: `46px`,
                    height: `46px`,
                    backgroundImage: weatherData.weatherIcon ? `url(${weatherData.weatherIcon})` : undefined
                  }}
                />
                <div
                  className="weather-type"
                  style={{
                    color: textColors.weather,
                    ...(showGradientText ? getGradientStyle(weatherData.weatherType || '') : {})
                  }}
                >
                  {weatherData.weatherType}
                </div>
              </div>
            </div>
            {/* 右侧 */}
            <div className="right-wrap">
              {/* 实况 */}
              <div
                className="forecast-time"
                style={{ color: textColors.time }}
              >
                {weatherData.currentTime}
              </div>
              {/* 信息区 */}
              <div className="temperature-section">
                <div className="section-item t-width">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              温度
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.temperature || '') : {})
              }}>{weatherData.temperature}</span>
                  </div>
                </div>
                <div className="section-item width-90">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              体感温度
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.feelsLike || '') : {})
              }}>{weatherData.feelsLike}</span>
                  </div>
                </div>
                <div className="section-item width-60">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              湿度
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.humidity || '') : {})
              }}>{weatherData.humidity}</span>
                  </div>
                </div>
                <div className="section-item t-width">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              气压
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.pressure || '') : {})
              }}>{weatherData.pressure}</span>
                  </div>
                </div>
                <div className="section-item width-90">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              风向
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.windDirection || '') : {})
              }}>{weatherData.windDirection}</span>
                  </div>
                </div>
                <div className="section-item width-60">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              风力
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.windLevel || '') : {})
              }}>{weatherData.windLevel}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">气象微站数据</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
          </div>
          <div className="air-area">
            {/* 左侧 */}
            <div className="left-wrap">
              {/* 图标 */}
              <div
                className="forecast-time"
                style={{ color: textColors.time }}
              >
                {weatherData.forecastTime}
              </div>
              {/* 天气类型 */}
              <div className="weather-section">
                <div
                  className="weather-icon"
                  style={{
                    width: `46px`,
                    height: `46px`,
                    backgroundImage: weatherData.weatherIcon ? `url(${weatherData.weatherIcon})` : undefined
                  }}
                />
                <div
                  className="weather-type"
                  style={{
                    color: textColors.weather,
                    ...(showGradientText ? getGradientStyle(weatherData.weatherType || '') : {})
                  }}
                >
                  {weatherData.weatherType}
                </div>
              </div>
            </div>
            {/* 右侧 */}
            <div className="right-wrap">
              {/* 实况 */}
              <div
                className="forecast-time"
                style={{ color: textColors.time }}
              >
                {weatherData.currentTime}
              </div>
              {/* 信息区 */}
              <div className="temperature-section">
                <div className="section-item t-width">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              温度
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.temperature || '') : {})
              }}>{weatherData.temperature}</span>
                  </div>
                </div>
                <div className="section-item width-90">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              体感温度
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.feelsLike || '') : {})
              }}>{weatherData.feelsLike}</span>
                  </div>
                </div>
                <div className="section-item width-60">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              湿度
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.humidity || '') : {})
              }}>{weatherData.humidity}</span>
                  </div>
                </div>
                <div className="section-item t-width">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              气压
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.pressure || '') : {})
              }}>{weatherData.pressure}</span>
                  </div>
                </div>
                <div className="section-item width-90">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              风向
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.windDirection || '') : {})
              }}>{weatherData.windDirection}</span>
                  </div>
                </div>
                <div className="section-item width-60">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              风力
            </span>
                  <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.windLevel || '') : {})
              }}>{weatherData.windLevel}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="chart-wrap">
            <div className="title-wrap">
              <div className="tab-selector">
                {airTabs.map((tab, index) => (
                  <div
                    key={tab.id}
                    className={`tab-item ${airTabIndex === index ? 'isActive' : 'unActive'}`}
                    onClick={() => handleTabClick(tab, index)}
                  >
                    {tab.text}
                  </div>
                ))}
              </div>
              <div className="action-icon"
                   style={{backgroundImage: actionIcon ? `url(${actionIcon})` : undefined, width: '24px', height: '24px', backgroundSize: 'cover'}}></div>
            </div>
            <div className="chart-area">
              <div className="chart-container" ref={chartRef} style={{ width: '100%', height: '100%'}}>
              </div>
            </div>
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">一小时/3小时囤重点城市气象预警</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
            <div className="plus-icon" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/plus-icon.png)'}} />
          </div>
          <div className="hour-area">
            {hourData.map((hour, index) => (
              <div className="hour-item">
                <div className="hour-icon" style={{backgroundImage: `url(${hour.icon})`}} />
                <div className="hour-middle">
                  <div className="title">{hour.title}</div>
                  <div className="str">{hour.type}</div>
                </div>
                <div className="hour-value">{hour.value}</div>
              </div>
            ))}
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">集水井数据</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
            <div className="plus-icon" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/plus-icon.png)'}} />
          </div>
          <div className="well-area">
            {wellData.map((well, index) => (
              <div className="well-item">
                <div className="well-icon" >
                  <div className="icon" style={{backgroundImage: `url(${well.icon})`}} />
                  <div className="bg" style={{backgroundImage: 'url(http://localhost:8085/static/images/qixiangfangzhai/hour-icon-bg.png)'}} />
                </div>
                <div className="well-content">
                  <div className="value-bg">
                    <div className="value">{well.value}</div>
                    <span style={{fontSize: '12px', paddingTop: '5px', marginLeft: '3px'}}>{well.unit}</span>
                  </div>
                  <div>{well.type}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-wrap">
        <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>物资管理</div>
              <div className="sen-title">物资管理</div>
            </div>
            <div className="subtitle">Material Management</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="bottom-area">
            <div className="tab-selector">
              {tabs.map((tab, index) => (
                <div
                  key={tab.id}
                  className={`tab-item ${tabIndex === index ? 'isActive' : 'unActive'}`}
                  onClick={() => handleTabClick(tab, index)}
                >
                  {tab.text}
                </div>
              ))}
            </div>

            {/* 统计数据区域 */}
            <div className="stats-area">
              {stats.map((stat, index) => (
                <div key={index} className="stat-item">
                  <div
                    className="stat-label"
                    style={{ color: statLabelColor }}
                  >
                    {stat.label}
                  </div>
                  <div className="stat-value-container">
              <span
                className="stat-value"
              >
                {stat.value}
              </span>
                    {stat.unit && (
                      <span
                        className="stat-unit"
                        style={{ color: statLabelColor }}
                      >
                  {stat.unit}
                </span>
                    )}
                  </div>
                </div>
              ))}
            </div>

            {/* 表格区域 */}
            <div className="table-area">
              {/* 表头 */}
              <div className="table-header" style={{backgroundImage:`url(http://localhost:8085/static/images/qixiangfangzhai/bz54.png)`}}>
                <div
                  className="header-cell"
                  style={{ color: headerTextColor }}
                >
                  {tableHeaders.name}
                </div>
                <div
                  className="header-cell"
                  style={{ color: headerTextColor }}
                >
                  {tableHeaders.quantity}
                </div>
                <div
                  className="header-cell"
                  style={{ color: headerTextColor }}
                >
                  {tableHeaders.expiring}
                </div>
              </div>

              {/* 表格数据 */}
              <div className="table-body">
                {records.map((record, index) => (
                  <div
                    key={record.id}
                    className="table-row"
                  >
                    <div
                      className="table-cell"
                      style={{ color: recordTextColor }}
                    >
                      {record.name}
                    </div>
                    <div
                      className="table-cell"
                      style={{ color: recordTextColor }}
                    >
                      {record.quantity}
                    </div>
                    <div
                      className="table-cell"
                      style={{ color: recordTextColor }}
                    >
                      {record.expiringQuantity}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

        </div>
        <div className="bottom-line" />
      </div>
    </div>
  );
});

export default WeatherDataCard;
